<template>
  <div class="my-counter">
    <button type="button" class="btn btn-light" @click="sub" >-</button>
    <input type="number" class="form-control inp" >{{ num }}
    <button type="button" class="btn btn-light"  @click="add" >+</button>
  </div>
</template>

<script>
import bus from '../main';
export default {
  props: {
    //接收到父组件Goods.vue的值
    num: {
      type: Number,
      default: 1,
    },
    //使用Bus用
    id: {
      required: true,
      type: Number,
    },
  },
  methods: {
    add() {
      //要发送给 App的数据格式为 { id, value }
      let  obj = { id: this.id, value: this.num + 1 };
      console.log(obj);
      //要做的事情:通过EventBus把 obj对象，发送给 App. vue 组件
      bus.$emit("share", obj);
    },
    sub() {
      if (this.num - 1 === 0) return;
      let  obj = { id: this.id, value: this.num - 1 };
      console.log(obj);
      bus.$emit("share", obj);
    },
  },
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn, .inp{
    transform: scale(0.9);
  }
}
</style>